
<template>
  <div>
    <h1>商品管理</h1>

    <!-- 搜素 -->
    <el-form :inline="true" :model="form" class="demo-form-inline">
      <el-form-item>
        <el-select v-model="form.region" placeholder="按ID查询">
          <el-option label="按ID查询" value="按ID查询"></el-option>
          <el-option label="按名称查询" value="按名称查询"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-input v-model="form.news" placeholder="关键词"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit(form)">查询</el-button>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="add()">添加商品</el-button>
      </el-form-item>
    </el-form>
    <!-- 搜素 -->
    <el-table :data="Datalist" style="width: 100%">
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column label="信息">
        <template slot-scope="scope">
          <p>{{ scope.row.name }}</p>
          <p>{{ scope.row.subtitle }}</p>
        </template>
      </el-table-column>

      <el-table-column prop="price" label="价格"></el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          <span class="state">{{
            scope.row.status == 1 ? "在售" : "已下架"
          }}</span>
          <el-button
            type="warning"
            size="mini"
            @click="changeStatus(scope.row.id, scope.row.status)"
            >{{ scope.row.status == 1 ? "下架" : "上架" }}</el-button
          >
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="look(scope.row.id,)"
            >查看</el-button
          >
          <el-button size="mini" @click="update(scope.row.id, )"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <my-page :total="total" @page="handleCurrentChange"></my-page>
  </div>
</template>

<script>
import {
  Table,
  TableColumn,
  Button,
  Form,
  FormItem,
  Select,
  Option,
  Input,
} from "element-ui";
import { comm, commsearch, changeStatus } from "../../../../api/index";
import MyPage from "../MyPage/MyPage.vue";
export default {
  name: "commodity",
  components: {
    MyPage,
    [Table.name]: Table,
    [Select.name]: Select,
    [Option.name]: Option,
    [Input.name]: Input,
    [TableColumn.name]: TableColumn,
    [Button.name]: Button,
    [Form.name]: Form,
    [FormItem.name]: FormItem,
  },
  data() {
    return {
      Datalist: [],
      total: 0,
      pagesize: 10,
      currentpage: 1,
      form: {
        region: "",
        news: "",
      },
    };
  },
  mounted() {
    comm({ pageNum: 1 }).then((res) => {
      console.log(res);
      this.Datalist = res.data.data.list;
      this.total = res.data.data.total;
    });
  },
  methods: {
    // 分页
    handleCurrentChange(cpage) {
      console.log(cpage);
      this.currentpage = cpage;
      comm({ pageNum: this.currentpage }).then((res) => {
        this.Datalist = res.data.data.list;
      });
    },
    //查找 搜素
    onSubmit(val) {
      console.log(val);
      if (val.region === "按ID查询") {
        commsearch({ pageNum: 1, productId: val.news }).then((res) => {
          console.log(res);
          this.Datalist = res.data.data.list;
        });
      } else if (val.region === "按名称查询") {
        commsearch({ pageNum: 1, productName: val.news }).then((res) => {
          console.log(res);
          this.Datalist = res.data.data.list;
        });
      } else {
        comm({ pageNum: 1 }).then((res) => {
          console.log(res);
          this.Datalist = res.data.data.list;
          this.total = res.data.data.total;
        });
      }
    },
    //上架下架
    changeStatus(id, status) {
      var text = "";
      if (status == 1) {
        status = 2;
        text = "确认下架此商品？";
      } else {
        status = 1;
        text = "确认上架此商品？";
      }
      let flag = confirm(text);
      if (flag) {
        changeStatus({ productId: id, status: status }).then((res) => {
          if (res.data.status == 0) {
            alert(res.data.data);
            comm({ pageNum: 1 }).then((res) => {
              console.log(res);
              this.Datalist = res.data.data.list;
              this.total = res.data.data.total;
            });
          } else if (res.data.status == 10) {
            this.$router.push("/login");
          }
        });
      }
    },
    //添加
    add() {
      this.$router.push("/classify/index/add");
    },
    //查看
    look(id, i) {
      console.log(id);
      console.log(i);
      this.$router.push("/classify/index/detail?&id=" + id);
    },
    update(id) {
      console.log(id);
      this.$router.push("/classify/index/edit?&id=" + id);
    },
  },
};
</script>

<style lang="scss" scoped>
.btn {
  display: inline-block;
  text-align: center;
  width: 80px;
  margin: 0 10px;
}
</style>